import '../../result/index.less'
// import MdResult from './MdResult'
import { useWorkFlowStore } from '@/store/workflowStore'
import { replaceIdWithTitle } from '@/util/utils'
/* 
运行成功节点信息展示
*/
const ItemComponent = ({ item }) => {
  const { variable, name, value } = item
  const displayValue = typeof value === 'boolean' ? String(value) : value
  const { flowVariables } = useWorkFlowStore()

  const displayName = replaceIdWithTitle(variable || name, flowVariables)

  return (
    <>
      <span className="nodeResult_llmTitle">{displayName}： </span>
      <span>{displayValue}</span>
    </>
  )
}
// 主要展示组件
const ListDisplay = list => {
  const { flowVariables } = useWorkFlowStore()

  return (
    <div className="nodeResult_llmCase flexCol">
      {list?.length > 0 &&
        list.map((item, index) => (
          <span className="flexRowStart items-start break-all " key={index}>
            {typeof item === 'string' ? (
              <span>{replaceIdWithTitle(item, flowVariables)}</span>
            ) : (
              <ItemComponent item={item} />
            )}
          </span>
        ))}
    </div>
  )
}
const StringDisplay = text => {
  return (
    <div className="nodeResult_llmCase flexCol">
      <div className="custom-node-result-pre whitespace-break-spaces">{text || '暂无输入信息'}</div>
    </div>
  )
}

const regex = /\^(\[\d+\])+?\^/g
export default function RowResult({ runInfo }) {
  return (
    <div className="flex max-h-[320px] max-w-[700px] flex-col gap-[16px] overflow-y-auto">
      {/* 系统提示词 */}
      {runInfo?.system_prompt && (
        <div>
          <div className="text-[14px] font-[600]">系统提示词</div>
          <div className="cmb-3.75 flex-row-start mt-1 whitespace-break-spaces break-words rounded-[6px] bg-[#efeff2] px-3 py-1.5">
            {runInfo.system_prompt}
            {/* <MdResult content={runInfo.system_prompt} /> */}
          </div>
        </div>
      )}

      {/* 用户提示词/输入 */}
      {runInfo?.inputs && (
        <div>
          <div className="text-[14px] font-[600]">{runInfo?.system_prompt ? '用户提示词' : '输入'}</div>
          <div className="mb-3.75 flex-row-start mt-1 whitespace-break-spaces break-words rounded-[6px] bg-[#efeff2] px-3 py-1.5">
            {Array.isArray(runInfo.inputs) ? ListDisplay(runInfo.inputs) : StringDisplay([runInfo.inputs])}
            {/* {runInfo?.inputs?.length > 0 ? ListDisplay(runInfo.inputs) : <MdResult content={runInfo.inputs} />} */}
          </div>
        </div>
      )}

      {/* 输出 */}
      {runInfo?.outputs && (
        <div>
          <div className="text-[14px] font-[600]">输出</div>
          <div className="mb-3.75 flex-row-start mt-1 whitespace-break-spaces break-words rounded-[6px] bg-[#efeff2] px-3 py-1.5">
            {runInfo?.outputs}
            {/* <MdResult content={runInfo.outputs} /> */}
          </div>
        </div>
      )}

      {/* 多输出列表形式展示 */}
      {runInfo?.outputsList && (
        <div>
          <div className="text-[14px] font-[600]">输出</div>
          <div className="mb-3.75 flex-row-start mt-1 whitespace-break-spaces break-words rounded-[6px] bg-[#efeff2] px-3 py-1.5">
            {Array.isArray(runInfo.outputsList)
              ? ListDisplay(runInfo.outputsList)
              : StringDisplay([runInfo.outputsList])}
          </div>
        </div>
      )}
    </div>
  )
}
